<template>
	<view class="box">
        <view class="bg-blue"></view>
			<view class="body-top">
				<view class="box-top">
					我的主页
				</view>
				<image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill" alt="">
					<view>
						<text class="username">{{userInfo.nickName}}</text>
					</view>
			</view>
			<view class="box-body">
				<view class="grid">
					<u-grid col="4">
						<u-grid-item @click.native="myTask">
							<image class="img-icon"  :src="this.getimageBaseUrl('mypage任务.png')"></image>
							<text class="grid-text">我的任务</text>
						</u-grid-item>
						<u-grid-item @click="findInfo">
							<image class="img-icon" :src="this.getimageBaseUrl('mypage个人基本资料.png')" ></image>
							<text class="grid-text">个人信息</text>
						</u-grid-item>
						<u-grid-item @click="gotoStudyDetail">
							<image class="img-icon" :src="this.getimageBaseUrl('mypage学习详情.png')" ></image>
							<text class="grid-text">学习详情</text>
						</u-grid-item>
						<u-grid-item>
							<button class="btn" :plain="true" open-type="contact" >
								<image class="img-icon" :src="this.getimageBaseUrl('mypage在线客服.png')" ></image>
								<view class="grid-text">在线客服</view>
							</button>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="body-nav">
					<view class="sub-nav">
						<image class="icon" :src="this.getimageBaseUrl('mypage我的等级.png')" mode="aspectFill"></image>
						<button class="btn" @click="gotoGradeDetailPage">我的等级</button>
						<u-icon class="uicon" name="arrow-right"></u-icon>
					</view>
					<view class="sub-nav">
						<image class="icon" :src="this.getimageBaseUrl('mypage我要反馈.png')"  mode="aspectFill"></image>
						<button class="btn" open-type="feedback">我要反馈</button>
						<u-icon class="uicon" name="arrow-right"></u-icon>
					</view>
					<view class="sub-nav" @click="logout">
						<image class="icon" :src="this.getimageBaseUrl('mypage退出登录.png')"  mode="aspectFill"></image>
						<button class="btn" >退出登录</button>	
						<u-icon class="uicon" name="arrow-right"></u-icon>		
					</view>
				</view>
			</view>
			
		<!-- </view> -->
	</view>
</template>

<script>
	//import { getBaseUrl, request } from '../../pro';

	export default {
		data() {
			return {
				userInfo: '',
				form: {
					username: '',
					password: '',
				}
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
		},
		methods: {
			async myTask() {
				uni.navigateTo({
					url: '/pages/myTask/myTask'
				})
			},
			//登录和注册
			/* register() {
				this.getUserProfile();
				uni.login({
					provider: 'weixin',
					success: (res) =>
		
						{
							let params = {
								url: `${this.$baseUrl}/login?code=${res.code}`,
							};
							this.$request(params).then(res => {
								uni.setStorageSync("user", res.data.data)
							}).catch(res => {
								console.log(res)
							})		
						}
				})
			}, */

			//退出登录
			logout() {
				this.userInfo = '',
					uni.clearStorageSync()
					uni.navigateTo({
						url: `/pages/index/index`
					})
			},
			// 查看志愿者详情请
			findInfo() {
				//在这里获取志愿者的id 根据id查询用户详情


				uni.navigateTo({
					//url: '/pages/userInfoDetail/userInfoDetail?id='+id
					url: `/pages/userInfoDetail/userInfoDetail?id=${uni.getStorageSync("user").id}`
				})
			},
			
			//去学习详情页面
			gotoStudyDetail(){
				uni.navigateTo({
					url:"/pages/studyDetail/studyDetail"
				})
			},
			/* getUserProfile() {
				uni.getUserProfile({
					desc: "完善用户个人信息",
					success: (res) => {
						this.userInfo = res.userInfo
						uni.setStorageSync("userInfo", res.userInfo)
					}
				})
			}, */

			//用户等级详情页面
			gotoGradeDetailPage() {
				uni.navigateTo({
					url: '/pages/gradeDetail/gradeDetail'
				})
			},
		},
	}
</script>

<style lang="scss">
	.box {
		position: relative;
		height: 1500rpx;
		width: 750rpx;
		overflow: hidden;
		background-color: rgba(245, 245, 245, 1);
		.login {
			.u-button {
				margin-top: 300rpx;
				margin-bottom: 100rpx;
			}
		}
		.bg-blue {
			display: block;
			width: 2600rpx;
			height: 600rpx;
			border-bottom-right-radius: 40%;
			transform: translateX(-800px);
			background-color:rgba(72, 118, 255, 1);
		}
	   
		.body-top{
			position: absolute;
			top: 120rpx;
			width: 90%;
			height: 620rpx;
			margin-left: 5%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.box-top {
				font-size: 36rpx;
				color: white;
				width: 100%;
				text-align: center;
				height: 52rpx;
				height: 52rpx;
				margin-left: 16rpx;
			}
			.avatar {
				margin-top: 56rpx;
				border-radius: 100%;
				border: 4rpx solid #ffffff;
				height: 144rpx;
				width: 144rpx;
				margin-bottom: 16rpx;
				// transform: translate(0, -50%);
			}
			
			.username {
				font-size: 36rpx;
				color: white;
				// transform: translateX(-50%);
			}
		}
        .box-body{
			
			position: absolute;
			top: 500rpx;
		.grid {
			
			
			background-color: rgba(255, 255, 255, 1);
			width: 686rpx;
			height: 158rpx;
			
			margin-left: 32rpx;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 16rpx; 
		
			.img-icon {
				height: 64rpx;
				width: 64rpx;
				margin-top: 24rpx;
			}

			.grid-text {
				margin-bottom: 24rpx;
				font-size: 26rpx;
				color: rgba(51, 51, 51, 1);
			}

			.btn {
				width: 100%;
				height: 100%;
				border: none;
				display: flex;
				flex-direction: column;
				align-items: center;

				.img-icon {
					height: 64rpx;
					width: 64rpx;
					transform:translateY(10px);
					margin-top: 24rpx;
				}

				.grid-text {
					margin-bottom: 24rpx;
					font-size: 26rpx;
					color: rgba(51, 51, 51, 1);
					/* #ifndef APP-PLUS */
					box-sizing: border-box;
					/* #endif */
				}
			}
		}



		.body-nav {
			margin-top: 24rpx;
			border: 1rpx solid #e1e1e1;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			width: 686rpx;
			height: 336rpx;
			margin-left: 32rpx;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			.sub-nav {
				width: 686rpx;
				display: flex;
				align-items: center;
				height: 112rpx;
				line-height: 112rpx;
				.icon {
					width: 40rpx;
					height: 40rpx;
					
					margin-left: 32rpx;
				}

				.btn {
					background-color:rgba(255, 255, 255, 1) ;
					font-size: 28rpx;
					margin: 0 380rpx 0 0;
					border: 0 white;
					line-height: 1.3;
				}

				.btn:after {
					border: none;
					border-radius: 0;
				}
				.uicon{

					height: 32rpx;
					width: 32rpx;
					margin-right:32rpx
				}
			}
}		}
	}

</style>
